<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="head">
        <div class="w">
            <ul>
                <li class="color-999">传智播客</li>
                <li class="color-999">|</li>
                <li class="color-333">线下教育</li>
            </ul>
        </div>
    </div>
    <div class="center">
        <div class="w">
            <div class="logo">
                <img src="img/logo.png" alt="传智播客">
            </div>
            <div class="login">
                <ul>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">登录</a></li>
                    <li>|</li>
                    <li><a href="#">购物车</a></li>
                    <li><a href="#">学习路线</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="w">
            <div class="all">
                <div class="all-a">
                    <a href="#">全部学科</a>
                </div>
                <div class="all-item">
                    <ul>
                        <li><a href="#">Java</a></li>
                        <li><a href="#">前端</a></li>
                        <li><a href="#">大数据</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">C/C++</a></li>
                        <li><a href="#">IOS</a></li>
                        <li><a href="#">UI</a></li>
                        <li><a href="#">网络营销</a></li>
                        <li><a href="#">Python</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav-in">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">就业班</a></li>
                    <li><a href="#">职业路线</a></li>
                    <li><a href="#">微课</a></li>
                    <li><a href="#">学习社区</a></li>
                    <li><a href="#">答问精灵</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="searchs">
                <input type="search" id="in1" placeholder="搜索关键字">
                <span>|</span>
                <input type="submit" id="img" value="搜索">
            </div>
        </div>
    </div>
    <div class="bannar">
        <div class="w">
            <img src="img/web.jpg" alt="博客园">
        </div>
    </div>
    <section>
        <div class="piao">
            <div class="w">
                <div class="right1">
                    <div class="img"><img src="img/infos.png" alt=""></div>
                    <div class="text">
                        <p>200元券</p>
                        <br>
                        <p>关注微信可得200元券</p>
                    </div>
                </div>
                <div class="right2">
                    <div class="img"><img src="img/infos.png" alt=""></div>
                    <div class="text">
                        <p>200元券</p>
                        <br>
                        <p>关注微信可得200元券</p>
                    </div>
                </div>
                <div class="right3">
                    <div class="img"><img src="img/infos.png" alt=""></div>
                    <div class="text">
                        <p>200元券</p>
                        <br>
                        <p>关注微信可得200元券</p>
                    </div>
                </div>
                <div class="right4">
                    <div class="img"><img src="img/infos.png" alt=""></div>
                    <div class="text">
                        <p>200元券</p>
                        <br>
                        <p>关注微信可得200元券</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="view">
            <div class="w">
                <div class="course">
                    <h3>热门公开课</h3>
                    <div class="coures-in1">
                        <div class="div1">
                            <a href="#"><img src="img/pub.png" alt="前端课程"></a>
                            <div class="texts">
                                <span id="s1">javascript</span>
                                <span id="s2">讲师：XXX</span>
                                <span id="s3">开课时间：11/11 20:00</span>
                                <span id="s4"><img src="img/pub01.png">直播未开始</span>
                            </div>
                        </div>
                    </div>
                    <div class="coures-in2">
                        <div class="div1">
                            <a href="#"><img src="img/pub.png" alt="前端课程"></a>
                            <div class="texts">
                                <span id="s1">javascript</span>
                                <span id="s2">讲师：XXX</span>
                                <span id="s3">开课时间：11/11 20:00</span>
                                <span id="s4"><img src="img/pub01.png">直播未开始</span>
                            </div>
                        </div>
                    </div>
                    <div class="more">
                        <img src="img/right.png">
                    </div>
                </div>
                <div class="news">
                    <div class="news-in">
                        <h3>博学谷新闻</h3>
                        <img src="img/news.png" alt="">
                    </div>
                    <div class="news-list">
                        <h3>咨询公告</h3>
                        <div class="lists">
                            <ul>
                                <li><a href="#">云计算在线班，挑战年薪30万</a></li>
                                <li><a href="#">云计算在线班，挑战年薪30万</a></li>
                                <li><a href="#">云计算在线班，挑战年薪30万</a></li>
                                <li><a href="#">云计算在线班，挑战年薪30万</a></li>
                                <li><a href="#">云计算在线班，挑战年薪30万</a></li>
                                <li><a href="#">云计算在线班，挑战年薪30万</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list">
            <div class="w">
                <div class="top">
                    <ul>
                        <li class="text-size"><a href="#">精品课程</a></li>
                        <li><a href="#">课程推荐</a></li>
                        <li><a href="#">JavaEE</a></li>
                        <li><a href="#">UI设计</a></li>
                        <li><a href="#">前端</a></li>
                        <li><a href="#">网络营销</a></li>
                        <li><a href="#">大数据</a></li>
                        <li><a href="#">Python</a></li>
                        <li><a href="#">PHP</a></li>
                    </ul>
                </div>
                <bid class="bottom">
                    <div class="div11">
                        <a href="#"><img src="img/wk.jpg" alt=""></a>
                        <h3>【前端】Vue.js的使用</h3>
                        <p>讲师：黑马讲师|18小时</p>
                        <div>
                            <span class="text2">￥699</span>
                            <span class="text1">￥899</span>
                            <span class="sp"><img src="img/per.png">149</span>
                        </div>
                    </div>
                    <div class="div12">
                        <a href="#"><img src="img/wk.jpg" alt=""></a>
                        <h3>【前端】Vue.js的使用</h3>
                        <p>讲师：黑马讲师|18小时</p>
                        <div>
                            <span class="text2">￥699</span>
                            <span class="text1">￥899</span>
                            <span class="sp"><img src="img/per.png">149</span>
                        </div>
                    </div>
                    <div class="div13">
                        <a href="#"><img src="img/wk.jpg" alt=""></a>
                        <h3>【前端】Vue.js的使用</h3>
                        <p>讲师：黑马讲师|18小时</p>
                        <div>
                            <span class="text2">￥699</span>
                            <span class="text1">￥899</span>
                            <span class="sp"><img src="img/per.png">149</span>
                        </div>
                    </div>
                    <div class="div14">
                        <a href="#"><img src="img/wk.jpg" alt=""></a>
                        <h3>【前端】Vue.js的使用</h3>
                        <p>讲师：黑马讲师|18小时</p>
                        <div>
                            <span class="text2">￥699</span>
                            <span class="text1">￥899</span>
                            <span class="sp"><img src="img/per.png">149</span>
                        </div>
                    </div>
                </bid>
            </div>
        </div>
    </section>

    <footer>
        <div class="w">
            <div class="us">
                <div class="bxg">
                    <h1>博学谷云课堂</h1>
                    <p>Java 是目前国内流行的编程语言，生态圈发展很完整，从手机应用、Web 网站到大数据系统都在使用 Java 开发。学习Java语言既有前景又有钱景，是被广泛使用的编程语言。</p>
                </div>
                <div class="ewm">
                    <h1>关注我们</h1>
                    <img id="weibo" src="img/weibo.png" alt="">
                    <img src="img/weixin.png" alt="">
                </div>
                <div class="friend">
                    <h1>友情链接</h1>
                    <ul>
                        <li><a href="#">传智播客</a></li>
                        <li><a href="#">传智播客论坛</a></li>
                        <li><a href="#">黑马程序论坛</a></li>
                        <li><a href="#">传智播客公开课</a></li>
                        <li><a href="#">传智播客教材下载</a></li>
                        <li><a href="#">CSDN</a></li>
                        <li><a href="#">黑马程序</a></li>
                        <li><a href="#">博学谷视频库</a></li>
                    </ul>
                </div>
            </div>
            <div class="last">
                <div class="c">
                    <ul>
                        <li><a href="#">关于我们</a></li>
                        <li>|</li>
                        <li><a href="#">联系我们</a></li>
                        <li>|</li>
                        <li><a href="#">人才招聘</a></li>
                        <li>|</li>
                        <li><a href="#">常见问题</a></li>
                    </ul>
                </div>
                <div class="p">
                    <p>江苏传智播客教育科技股份有限公司 Copyright 2006-2021， All Rights Reserved 苏ICP备16007882号-12PMI，PMP 和 PMBOK 是 Project Management Institute, Inc. 的注册商标</p>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>